<template>
    <el-row>
        <!-- 左边的菜单部分 -->
        <el-col :span="2">
            <h5 class="mb-2" style="text-align: center">系统菜单</h5>
            <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @select="menuSelect"
            >
                <template v-for="menu in menus">
                    <!-- 如果不是父级菜单，就直接显示菜单本身 -->
                    <!-- index直接绑定路由 -->
                    <el-menu-item :index="menu.menuRouter" v-if="menu.menuParent == 1">
                        <template #title>
                            <span>{{menu.menuText}}</span>
                        </template>
                    </el-menu-item>
                    <!-- 如果是父级菜单，就要显示sub-menu -->
                    <!-- 如果不是子菜单，index绑定编号 -->
                    <el-sub-menu v-else :index="menu.menuId" >
                        <template #title>
                            <span>{{menu.menuText}}</span>
                        </template>
                        <el-menu-item-group>
                            <!-- 遍历显示子菜单 -->
                            <!-- index直接绑定路由 -->
                            <el-menu-item v-for="subMenu in menu.children" :index="subMenu.menuRouter">
                                {{subMenu.menuText}}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </template>
            </el-menu>
        </el-col>
        <!-- 右边的主体部分 -->
        <el-col :span="22">
            <router-view/>
        </el-col>
    </el-row>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
// 导入homeRequest
import homeRequest from "@/api/home.js";
// 申明全局路由对象
let router = useRouter();
// 定义数组保存所有菜单信息
let menus = ref([]);
// 定义函数加载所有的菜单信息
function loadMenus(){
    homeRequest.loadMenus(res=>{
        // res就是我们后端响应的数据对象。
        // 在API中我们已经将axios封装的数据解出来了，所以这里的res就是我们的QdResult
        menus.value = res.data;
    })
}
/**
 * 菜单激活事件
 * @param index 菜单的index属性的值，我们设置的就是路由
 */
function menuSelect(index){
    router.push({path:index});
}
// 申明周期函数：挂在完成之后加载数据
onMounted(()=>{
    loadMenus();
})
</script>

<style scoped>

</style>